<template>
  <view class="loading-spinner" v-if="show">
    <view class="spinner-container">
      <view class="spinner" :class="size" :style="spinnerStyle"></view>
      <text v-if="text" class="loading-text">{{ text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LoadingSpinner',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: '加载中...'
    },
    size: {
      type: String,
      default: 'medium',
      validator: value => ['small', 'medium', 'large'].includes(value)
    },
    color: {
      type: String,
      default: ''
    }
  },
  computed: {
    spinnerStyle() {
      return this.color ? { borderTopColor: this.color } : {}
    }
  }
}
</script>

<style scoped>
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
}

.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
}

.spinner {
  border: 3rpx solid #f3f3f3;
  border-top: 3rpx solid var(--primary-color, #C6282B);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner.small {
  width: 40rpx;
  height: 40rpx;
  border-width: 2rpx;
}

.spinner.medium {
  width: 60rpx;
  height: 60rpx;
  border-width: 3rpx;
}

.spinner.large {
  width: 80rpx;
  height: 80rpx;
  border-width: 4rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style> 